.ui-popup > .arrow-guide {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    pointer-events: none;
}

.arrow-container {
    position: absolute;
}

.arrow {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    overflow: hidden;
    box-sizing: border-box;
}

.arrow-container.ie .arrow {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand');
}

.arrow-background {
    position: absolute;
    border: none;
}

.arrow-container.ie .arrow-background {
    background: none;
}

.arrow-container.t .arrow-background,
.arrow-container.b .arrow-background {
    /* Undo rotation and reflect in x axis */
    -webkit-transform: rotate(-45deg) scale(1, -1);
    -moz-transform: rotate(-45deg) scale(1, -1);
    -ms-transform: rotate(-45deg) scale(1, -1);
    transform: rotate(-45deg) scale(1, -1);
}

.arrow-container.t.ie .arrow-background,
.arrow-container.b.ie .arrow-background {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=-0.7071067811865467, M21=-0.7071067811865467, M22=-0.7071067811865483, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=-0.7071067811865467, M21=-0.7071067811865467, M22=-0.7071067811865483, SizingMethod='auto expand');
}

.arrow-container.l .arrow-background,
.arrow-container.r .arrow-background {
    /* Undo rotation and reflect in y axis */
    -webkit-transform: rotate(-45deg) scale(-1, 1);
    -moz-transform: rotate(-45deg) scale(-1, 1);
    -ms-transform: rotate(-45deg) scale(-1, 1);
    transform: rotate(-45deg) scale(-1, 1);
}

.arrow-container.l.ie .arrow-background,
.arrow-container.r.ie .arrow-background {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865483, M12=0.7071067811865467, M21=0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865483, M12=0.7071067811865467, M21=0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand');
}

/* Dimensions related to the popup arrow
-----------------------------------------------------------------------------------------------------------*/
/* desired triangle height: 10px */

/**
 * guide for the arrow - its width, height, and offset are theme-dependent and
 * should be expessed as left, right, top, bottom, so that the element bearing
 * such a class becomes stretched inside its parent position: relative element.
 * The left/top/right/bottom specified below should reflect the corresponding
 * border radii and so it leaves room for the shadow:
 *     ..--------------------..
 *   ."        ^ top           ".
 *  /          v                 \
 * |     +------------------+     |
 * |     |                  |     |
 * | left|                  |right|
 * |<--->|                  |<--->|
 * |     +------------------+     |
 *  \          ^                 /
 *   `.        v bottom        .'
 *     ""--------------------""
 * The idea is that the top/left of the arrow container box does not move to a
 * coordinate smaller than the top/left of the guide and the right/bottom of
 * the arrow container box does not move to a coordinate larger than the
 * bottom/right of the guide. This will help us avoid the following situation:
 *        ..--------------------..
 *      ."        ^ top           ".
 *   /|/          v                 \
 *  / |     +------------------+     |
 *  \ |     |                  |     |
 *   \| left|                  |right|
 *    |<--->|                  |<--->|
 *    |     +------------------+     |
 *     \          ^                 /
 *      `.        v bottom        .'
 *        ""--------------------""
 * The arrow should not receive a top/left coordinate such that it is too close
 * to one of the corners, because then at first the shadow of the arrow and,
 * given a coordinate even closer to the corner, even the body of the arrow will
 * "stick out" of the corner of the popup. The guide provides a hint to the
 * arrow positioning code as to which range of values is acceptable for the
 * arrow container's top/left coordinate.
 **/

.ui-popup.ui-corner-all > .arrow-guide {
    left: .6em /*{global-radii-blocks}*/;
    right: .6em /*{global-radii-blocks}*/;
    top: .6em /*{global-radii-blocks}*/;
    bottom: .6em /*{global-radii-blocks}*/;
}

.arrow-container {
    width: 20px;
    height: 20px;
}

/* aside from the "infinities" (-1000,2000), triangle height is used */
.arrow-container.l {
    left: -10px;
    clip: rect(-1000px, 10px, 2000px, -1000px);
}

.arrow-container.ie.l {
    clip: rect(-1000px 10px 2000px -1000px);
}

.arrow-container.t {
    top: -10px;
    clip: rect(-1000px, 2000px, 10px, -1000px);
}

.arrow-container.ie.t {
    clip: rect(-1000px 2000px 10px -1000px);
}

.arrow-container.r {
    right: -10px;
    clip: rect(-1000px, 2000px, 2000px, 10px);
}

.arrow-container.ie.r {
    clip: rect(-1000px 2000px 2000px 10px);
}

.arrow-container.b {
    bottom: -10px;
    clip: rect(10px, 2000px, 1000px, -1000px);
}

.arrow-container.ie.b {
    clip: rect(10px 2000px 1000px -1000px);
}

/**
 * The arrow needs to be centred inside the arrow container such that, when
 * rotated 45 degrees, its corners touch, but do not break through, the sides
 * of the arrow container:
 *
 * +----------+
 * |    /\    |
 * |   /  \  <------ arrow container
 * |  /    \  |
 * | /      \ |
 * |/  arrow \|
 * |\        /|
 * | \      / |
 * |  \    /  |
 * |   \  /   |
 * |    \/    |
 * +----------+
 **/
.arrow {
    /* (2*desired triangle height)/sqrt(2) - does not account for border - centred within the outer rectangle */
    width: 14.142135624px;
    height: 14.142135624px;
    /* ( (2*desired triangle height) - (above width/height) ) / 2 */
    left: 2.928932188px;
    top: 2.928932188px;
}

.arrow-container.ie .arrow {
    /* Fix rotation center  - see http://www.useragentman.com/IETransformsTranslator/ */
    margin-left: -3px;
    margin-top: -3px;
}

.arrow-background {
    /* desired triangle height is used here */
    width: 20px;
    height: 20px;
}

.arrow-container.t .arrow-background {
    /* 0px triangle height */
    background-position: 0 10px;
}

.arrow-container.l .arrow-background {
    /* triangle height 0px */
    background-position: 10px 0;
}

/* For some reason (probably because of all the decimal places) there's a
   rounding error in the background position, so push it over by one */
.arrow-container.b .arrow-background {
    background-position: 0 11px;
}

.arrow-container.r .arrow-background {
    background-position: 11px 0;
}
